<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="pic/title.png" />
<title>红满堂2015年招新</title>
<style>
body{
	background:#ACD697;
	text-align:center;
}
.container{
	width:450px;
	margin:4% auto 0 auto;
}
.left{
	float:left;
}
.dare{
	position:relative;
	animation:dare 0.6s;
	animation-fill-mode:both;
}
@keyframes dare{
	0% {top:120px;}
	100% {top:0px;}
}
.new{
	position:relative;
	z-index:1;
	margin-top:-240px;
	float:right;
	animation-delay:2s;
	animation:new 0.8s;
	animation-fill-mode:both;
}
@keyframes new{
	0% {width:0%;}
	100% {width:50%}
}
.join-button{
	padding-top:10px;
	background:#B4D465;
	border-radius:8px;
	width:150px;
	color:#fff;
	padding:6px 30px;
	font-family:"幼圆", "楷体";
	font-size:24px;
	text-decoration:none;
	float:right;
	animation:join-button 0.6s;
	animation-delay:0.3s;
	animation-fill-mode:both;
}
@keyframes join-button{
	from{transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg); /* Safari and Chrome */
	-moz-transform:rotateX(90deg);
	-o-transform:rotateX(90deg);
	-ms-transform:rotateX(90deg);	}
	to{};
}
</style>
</head>

<body>
<div class="container">
<div class="left">
	<img src="pic/dare.jpg" class="dare"/>
</div>

<div class="right">
	<img src="pic/question.jpg" style="z-index:-1"/>
    <img src="pic/new.jpg" class="new"/>
    <a href="Form.html" target="_blank" class="join-button"><b>我 要 加 入</b></a>
</div>
</body>
</html>
